<template>
	<view class="content">
		<view class="address-sele-box flex-c-c" @click="goAddressSele">
			<!-- 顶部地区选择 -->
			<image src="../static/icon1.png" mode="heightFix"></image>
			<text>{{isSity}}</text>
			<image src="../static/icon2.png" mode="widthFix"></image>
		</view>
		<view class="store-list-box">
			<!-- 活动列表 -->
			<block v-if="storeList.length>0">
			<view class="store-item-box" v-for="(item,index) in storeList" :key="item.activity_id">
				<view class="time-info-box">
					<text>{{item.date}}</text>
				</view>
				<view class="store-box">
					<view class="store-logo-box">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="store-info-box">
						<view class="store-title-box ellipsis">
							<text>{{item.title}}</text>
						</view>
						<view class="store-txt-box">
							<text>活动时间：{{item.time}}</text>
							<text>所在城市：{{item.city}}</text>
							<text v-if="item.type==1">活动类型：普通活动</text>
							<text v-if="item.type==2">活动类型：试打会活动</text>
							<view class="bottom-but-box" @click="bindGoDetails(item.activity_id)">
								<text>查看详情</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			</block>
			<!-- 无记录状态 -->
			<block v-else>
				<icon-status :imgUrl="'../../pageIndex/static/icon23.png'" :statusInfo="'暂时没有活动安排'"></icon-status>
			</block>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import iconStatus from '@/components/noRecordIcon/iconStatus.vue';
	export default {
		components:{
			iconStatus
		},
		data(){
			return {
				storeList:[],//活动列表
				isSity:'',//用户当前城市
				page:1,//页码
				limit:10,//条数
			}
		},
		onLoad() {
			uni.showLoading({title:"加载中"});
			uni.setStorageSync('isLoad',0);
			getApp().globalData.city = null;
			this.getActivityList();
		},
		onShow() {
			if(uni.getStorageSync('isLoad')){
				uni.showLoading({title:"加载中"});
				this.page=1;
				this.storeList = [];
				this.getActivityList();
			}
		},
		methods:{
			getActivityList(){ //活动列表数据
				if(getApp().globalData.city==null){
					this.isSity = uni.getStorageSync('city').city_name;
					this.activityList(uni.getStorageSync('city').city_id);
				}else{
					this.isSity = getApp().globalData.city.city_name;
					this.activityList(getApp().globalData.city.city_id);
				}
			},
			activityList(cityId){
				this.$u.api.activityListApi({city:cityId,page:this.page,limit:this.limit}).then(res=>{
					if(res.code==1){
						if(this.page==1){
							console.log('活动列表：',res);
							this.storeList = res.data;
						}else{
							if(res.data.length>0){
								this.storeList = this.storeList.concat(res.data);
							}else{
								this.$refs.uToast.show({title: '没有更多了',position:'center'});
							}
						}
					}
				});
			},
			bindGoDetails(activityId){ //查看详情
				if(uni.getStorageSync('isLogin')){
					this.$gourl(`./activityDetails?activityId=${activityId}`);
					uni.setStorageSync('isLoad',0);
				}else{
					this.$showToast('请登录');
					setTimeout(function () {
					  uni.navigateTo({
					    url: '/pageMember/login/login'
					  })
					}, 1500)	
				}
			},
			goAddressSele(){ //地区选择
				this.$gourl(`../storeInfo/region`);
				uni.setStorageSync('isLoad',1);
			}
		},
		onReachBottom(){
			this.page++;
			uni.showLoading({title:"加载中"});
			this.getActivityList();
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		padding-top: 82rpx;
		.address-sele-box{
			width: 100%;
			position: fixed; top: 0; z-index: 100;
			justify-content: flex-start;
			padding: 20rpx;
			font-size: 32rpx;font-weight: bold;
			color: #212121;
			background: #FFFFFF;
			image{width: 30rpx;height: 30rpx;}
			text{padding: 0 10rpx;}
		}
		.store-list-box{
			padding-left: 20rpx;
			.store-item-box{
				padding: 40rpx 20rpx 40rpx 0;
				border-bottom: 1rpx solid #EDEDED;
				.time-info-box{
					font-size: 26rpx;font-weight: 400;
					color: #666666;
					padding-bottom: 20rpx;
				}
				.store-box{
					display: flex;
					.store-logo-box{
						flex: 0.36;
						line-height: 0;
						image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
					}
					.store-info-box{
						flex: 0.7;
						display: flex;flex-direction: column;
						.store-title-box{font-size: 30rpx;font-weight: bold;color: #212121;margin-bottom: 20rpx;max-width: 470rpx;}
						.store-txt-box{
							font-size: 26rpx;
							font-weight: 400;
							color: #666666;
							display: flex;flex-direction: column;
							text{margin-bottom: 20rpx;}
							.bottom-but-box{
								width: 50%;
								background: #000;
								padding: 15rpx 0;
								font-size: 30rpx;font-weight: 400;
								color: #FFFFFF;
								text-align: center;
								border-radius: 10rpx;
								text{margin-bottom: 0;}
							}
						}
					}
				}
			}
		}
	}
</style>